// 1.less兼容css
// .box {
//   width: 100px;
//   height: 100px;
//   background-color:@mainColor;
// }


// 2.定义变量
@mainColor: #f3c258;
@smallFontSize: 16px;
@normalFontSize: 20px;
@bigFontSize: 30px;

// .box {
//   width: 100px;
//   height: 100px;
//   background-color:@mainColor;
//   font-size: @normalFontSize;
// }

// 3. 选择器的嵌套
.container {

  .box {
    width: 100px;
    height: 100px;
    background-color: @mainColor;
    font-size: @normalFontSize;
  }

  h1{
    font-size: @smallFontSize;
  }
}